#include('header.html', {title: '后台管理·主页大图管理', imgs: 'active'})
<link rel="stylesheet" href="/static/layui/css/cropper.css">
<div class="body-wrapper">
  <div class="layui-card">
    <div class="layui-card-header">
      <h3 class="card-title font-yy">
        主页大图管理
      </h3>
      <div class="header-tools">

      </div>
    </div>
  </div>
  <div id="imgs" class="layui-row" style="margin: 0 -10px">
    <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
      <div class="img-box">
        <div class="img-add-btn">
          <div class="icon"><i class="layui-icon layui-icon-upload"></i></div>
          <p class="tip"><i class="layui-icon layui-icon-note"></i> 图片上传</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="imgTpl">
  <div id="img-{{d.id}}" class="layui-col-lg3 layui-col-md4 layui-col-sm6">
    <div class="img-box">
      <div class="img-preview">
        <img src="{{d.path}}" alt="主页大图">
      </div>
      <div class="img-tools">
        <!--<a class="layui-btn layui-btn-sm layui-btn-normal">上架</a>-->
        <!--<a class="layui-btn layui-btn-sm layui-btn-warm">下架</a>-->
        <a class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteImg('{{d.id}}')">删除</a>
      </div>
    </div>
  </div>
</script>

<script>
  layui.config({base: '/static/layui/modu/'})
      .use(['jquery', 'layer', 'croppers', 'laytpl'], function () {
        var $ = layui.jquery;
        var croppers = layui.croppers;
        var laytpl = layui.laytpl;

        var $imgs = $('#imgs');

        window.deleteImg = function(id) {
          layer.confirm('确定删除图片', {title: '删除提示', icon: 3}, function (index) {
            $.post('/admin/bigImage/delete/' + id, function (data) {
              if (data.success) {
                document.getElementById('img-' + id).remove();
                layer.msg('删除成功！', {time: 1200, icon: 6});
              }
            });
          });
        };

        $.post('/admin/bigImage/page', {page: 1, size: 200}, function (data) {
          if (data.success) {
            var imgs = data.payload.rows;
            for (var i = 0; i < imgs.length; i++) {
              var ig = imgs[i];
              laytpl($('#imgTpl').html()).render(ig, function (html) {
                $imgs.append(html);
              });
            }
          }
        });

        croppers.render({
          elem: '.img-box',
          saveW: 1260,
          saveH: 450,
          mark: 126 / 45,
          area: ['700px', '500px'],
          url: '/file/t/upload',
          done: function (data) {
            laytpl($('#imgTpl').html()).render(data, function (html) {
              $imgs.append(html);
            });
          }
        });
      });
</script>

#include('footer.html')
